<template>
  <div id="headBox" class="pageNormalBackground">
    <headerT title="我的订单" />
    <div class="headMarginTop boxMain">
      <div class="everyBlockBgcolor displayFlex nav">
        <div :class="flag==1?'active':''" @click="tabNav(1)">全部</div>
        <div :class="flag==2?'active':''" @click="tabNav(2)">待付款</div>
        <div :class="flag==3?'active':''" @click="tabNav(3)">待使用</div>
        <div :class="flag==4?'active':''" @click="tabNav(4)">已完成</div>
      </div>
      <div class="pageNormalBackground orderMain">
        <div v-if="orderList.length!=0">
          <div class="everyBlockBgcolor orderList" v-for="(item,index) in orderList" :key="index">
            <div class="displayFlex store">
              <div class="displayFlex storeName">
                <img src="/static/images/store.png" />
                <p>{{item.shops_info}}</p>
              </div>
              <div
                class="orderStatus"
              >{{item.state==1?'待付款':item.state==2?'待使用':item.state==3?'待发货':item.state==4?'已完成':item.state==5?'订单过期':item.state==6?'订单取消':''}}</div>
            </div>
            <div class="displayFlex list" @click="toOderDetails(item.id)">
              <img v-if="item.good_img==null" src="/static/images/lishi.png" />
              <img v-if="item.good_img!=null" :src="item.good_img" />
              <div class="list_title">
                <div class="goodsTitle">{{item.goods_name}}</div>
                <div class="displayFlex goodsPrice">
                  <div class="goodsNowPrice">￥{{item.price}}</div>
                  <div class="goodsNum">x{{item.amount}}</div>
                </div>
              </div>
            </div>
            <div class="displayFlex orderOperation">
              <div class="operation" v-if="item.state==1">付款</div>
              <div class="operation" v-if="item.state==2 || item.state==4 || item.state==3">查看订单</div>
              <div class="operation" v-if="item.state==1" @click="btnCancel(item.id)">取消订单</div>
              <div
                @click="btnDel(item.id)"
                class="operation operationOn"
                v-if="item.state==1 || item.state==4 || item.state==5|| item.state==6"
              >删除订单</div>
            </div>
          </div>
        </div>
        <div class="noData" v-if="orderList.length==0">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import { orderList, orderCancel, orderDel } from "@/services/personCenter";
export default {
  components: {
    headerT
  },
  name: "",

  data() {
    return {
      flag: 1,
      needInfo: {
        id: "",
        state: "",
        page: 1,
        pageSize: 10
      },
      totalPage: 0, //总页数
      orderList: [] //订单列表
    };
  },
  created() {
    this.flag = this.$route.query.orderTypeNum;
    if (this.$route.query.orderTypeNum == 1) {
      this.needInfo.state = "";
    } else if (this.$route.query.orderTypeNum == 2) {
      this.needInfo.state = 1;
    } else if (this.$route.query.orderTypeNum == 3) {
      this.needInfo.state = 2;
    } else if (this.$route.query.orderTypeNum == 4) {
      this.needInfo.state = 4;
    }
    this.getList();
  },
  watch: {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    //前往订单详情页
    toOderDetails(id){
      this.$tools.goPage_query('orderDetails',{orderId:id})
    },
    //删除订单
    btnDel(id) {
      const _this = this;
      _this.$vux.confirm.show({
        title: "提示",
        content: "确定要删除此订单吗？",
        onCancel() {
        },
        onConfirm() {
          _this.$post(orderDel, { id: id }).then(res => {
            console.log(res.code, "res");
            if (res.code == 200) {
              _this.$vux.toast.show({
                text: "成功",
                position: "middle",
                type: "success"
              });
              _this.getList();
            }
          });
        }
      });
    },
    //取消订单
    btnCancel(id) {
      const _this = this;
      _this.$vux.confirm.show({
        title: "提示",
        content: "确定要取消此订单吗？",
        onCancel() {
        },
        onConfirm() {
           _this.$vux.loading.show({
            text: "Loading"
          });
          _this.$post(orderCancel, { id: id }).then(res => {
            console.log(res.code, "res");
            _this.$vux.loading.hide();
            if (res.code == 200) {
             
              this.$vux.toast.text('成功！！！', 'middle')
              _this.getList();
            }
          }).catch(error => {
            _this.$vux.loading.hide();
          });
        }
      });
    },
    handleScroll() {
      //分页加载数据
      if (
        document.documentElement.scrollTop + window.innerHeight >=
        document.body.offsetHeight
      ) {
        if (this.needInfo.page >= this.totalPage) {
          return;
        } else {
          this.needInfo.page = this.needInfo.page + 1;
          this.getList();
        }
      }
    },
    getList() {
      //订单列表
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(orderList, this.needInfo).then(res => {
        // this.orderList = res.data.data;
        this.$vux.loading.hide();
        this.totalPage = res.data.last_page;
        if (this.needInfo.page == 1) {
          this.orderList = res.data.data;
          this.needInfo.page = res.data.current_page;
        } else {
          this.orderList = [...this.orderList, ...res.data.data];
        }
      }).catch(error => {
          this.$vux.loading.hide();
        });
    },
    tabNav(num) {
      //切换数据
      this.flag = num;
      this.needInfo.page = 1;
      switch (num) {
        case 1:
          this.needInfo.state = "";
          break;
        case 2:
          this.needInfo.state = 1;
          break;
        case 3:
          this.needInfo.state = 2;
          break;
        case 4:
          this.needInfo.state = 4;
          break;
        default:
          this.needInfo.state = "";
          break;
      }
      this.getList();
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
@colorRed: #f64135;

.boxMain {
  .nav {
    font-size: 0.32rem;
    color: #4e4e4e;
    justify-content: space-around;
    div {
      padding: 0.3rem;
    }
    .active {
      color: @colorRed;
      position: relative;
    }
    .active:after {
      content: "";
      width: 0.49rem;
      height: 0.1rem;
      background: linear-gradient(
        270deg,
        rgba(246, 65, 53, 0.3) 0%,
        rgba(246, 65, 53, 1) 100%
      );
      border-radius: 1rem;
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .orderMain {
    //    border: 1px solid red;
    box-sizing: border-box;
    padding-bottom: 1.2rem;

    .orderList {
      height: 4.48rem;
      margin: 0.42rem 0.34rem;
      border-radius: 0.15rem;
      padding: 0.32rem 0.39rem;

      .store {
        font-size: 0.32rem;
        color: #4e4e4e;
        justify-content: space-between;
        .storeName {
          width: calc(100% - 1rem);

          img {
            width: 0.39rem;
            height: 0.34rem;
            margin-right: 0.14rem;
          }
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
          }
        }
        .orderStatus {
          color: @colorRed;
          margin-left: 1rem;
          width: 2rem;
          text-align: right;
        }
      }
      .list {
        height: 1.77rem;
        margin: 0.46rem 0 0.43rem 0;
        img {
          widows: 2.22rem;
          height: 1.77rem;
          display: block;
        }
        .list_title {
          margin-left: 0.31rem;
          width: calc(100% - 2.5rem);
          .goodsTitle {
            font-size: 0.34rem;
            font-weight: bold;
            color: #4e4e4e;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
          }
          .goodsPrice {
            justify-content: space-between;
            .goodsNowPrice {
              font-size: 0.44rem;
              color: @colorRed;
            }
            .goodsNum {
              font-size: 0.32rem;
              color: #9b9b9b;
            }
          }
        }
      }

      .orderOperation {
        font-size: 0.32rem;
        color: #4e4e4e;
        div {
          margin-right: 0.39rem;
          text-align: center;
          border-radius: 0.8rem;
          padding: 0.1rem 0.4rem;
        }
        .operation {
          border: 1px solid #dadada;
        }
        .operationOn {
          border: 1px solid @colorRed;
          color: @colorRed;
        }
      }
    }
  }
}
</style>
